<template>

  <div class="app-container">
    <div class="app-title">
      <span>财政审核卡号</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-col :span="1">
          <i
            :class="[treeShow ? 'el-icon-s-fold treeI': 'el-icon-s-unfold treeI']"
            @click="toggerTree"
          />
        </el-col>
        <div class="tap-fillet">
          <el-radio-group
            v-model="activeName"
            style="margin-left:4rem; width:700px; height:15px; margin-top:-57px "
          >
            <!-- <el-radio-button
              label="0"
              name="waitAffirm"
            ><img
          style="width:16px; height:16px;"
          :src="Processedimg"
        >待确认</el-radio-button> -->
            <el-radio-button
              label="1"
              name="noAudit"
            ><img
              style="height:12px;"
              :src="noProcessedimg"
            >未接收</el-radio-button>
            <el-radio-button
              label="2"
              name="audit"
            > <img
              style=" height:12px;"
              :src="Untreatedimg"
            >已接收</el-radio-button>
            <el-radio-button
              label="recreated"
              name="recreated"
            > <img
              style=" height:12px;"
              :src="Processedimg"
            >已生成</el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
      <div class="filter-container">
        <div>
          <el-col
            style="text-align:right;margin-top: -3px;"
            :span="16"
          >
            <el-button
              size="small"
              class="filter-item"

              type="primary"
              @click="Query"
            >
              查询
            </el-button>
            <el-button
              v-if="activeName=='0'"
              size="small"
              class="filter-item"
              :loading="handleLoading"
              type="primary"
              @click="handle"
            >
              财政确认
            </el-button>
            <el-button
              v-if="activeName=='1'"
              size="small"
              font-size="14px"
              class="filter-item"
              :loading="SendBackLoading"
              type="primary"
              @click="SendBack"
            >
              财政退回
            </el-button>
            <el-button
              v-if="activeName=='1'"
              size="small"
              class="filter-item"
              type="primary"
              :loading="PassLoading"
              @click="Pass"
            >
              财政接收
            </el-button>
            <!-- <el-button
              v-if="activeName=='1'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="cancelLoading"
              @click="cancel"
            >
              取消确认
            </el-button> -->
            <el-button
              v-if="activeName=='2'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;"
              type="primary"
              :loading="AuditLoading"
              @click="Audit"
            >
              撤销接收
            </el-button>
            <el-button
              v-if="activeName === '2'"
              size="small"
              class="filter-item"
              style="margin-left: 10px;width:120px;"
              type="primary"
              :loading="generateBankDataLoading"
              @click="generateBankData"
            >
              生成数据发银行
            </el-button>
            <el-button
              v-if="activeName === '2'"
              size="small"
              class="filter-item"
              style="margin-left:10px;width:100px;"
              type="primary"
              :loading="exportLoading"
              @click="exportSalaryData"
            >
              导出银行数据
            </el-button>
            <!-- <el-button
              v-if="activeName === '2'"
              size="small"
              class="filter-item"
              style="margin-left:10px;width:120px;"
              type="primary"
              :loading="regenerateBankDataLoading"
              @click="regenerateBankData"
            >
              重新生成银行数据
            </el-button> -->
          </el-col>
        </div>
      </div>
    </el-row>

    <div
      ref="box"
      class="box"
    >
      <div
        class="left"
        :class="[isActive ? 'wid':'wids']"
      >
        <div
          :class="[treeShow ? 'treeShow' : 'treeNotShow']"
          :style="{'height' : treeHeight + 'px'}"
        >
          <AgencyTree
            class="agencyTree"
            @handleTreeQuery="handleTreeQuery"
          />
        </div>
      </div>
      <div
        v-show="Show"
        class="resize"
        title="收缩侧边栏"
      />
      <div
        class="mid"
        :class="[isActive ? 'mids': 'min']"
      >
        <financialAuditCardNumberChildrenTable
          :key="timer"
          ref="chil"
          :tab-pane="activeName"
          @handleCallBack="handleCallBack()"
          @SendBackCallBack="SendBackCallBack()"
          @PassCallBack="PassCallBack()"
          @cancelCallBack="cancelCallBack()"
          @AuditCallBack="AuditCallBack()"
          @generateBankDataCallBack="generateBankDataCallBack"
          @exportCallback="exportCallback"
          @regenerateBankDataCallBack="regenerateBankDataCallBack"
        />
      </div>
      <Drag ref="icon" />

    </div>
  </div>
</template>

<script>
import financialAuditCardNumberChildrenTable from '@/views/exceptionCardNumberManage/children/financialAuditCardNumberChildren'
import AgencyTree from '@/components/tree/agencyTree'
import Drag from '@/components/Drag'
export default {
  name: 'FinancialAuditCardNumber',
  components: { financialAuditCardNumberChildrenTable, AgencyTree, Drag },

  data() {
    return {
      treeHeight: null,
      Show: false,
      isActive: true,
      treeShow: false,
      handleLoading: false,
      SendBackLoading: false,
      PassLoading: false,
      cancelLoading: false,
      AuditLoading: false,
      generateBankDataLoading: false,
      exportLoading: false,
      regenerateBankDataLoading: false,

      timer: '',
      activeName: '1',
      Untreatedimg: require('@/assets/images/processed.png'),
      Processedimg: require('@/assets/images/blueselect.png'),
      noProcessedimg: require('@/assets/images/select.png')

    }
  },
  watch: {
    activeName(val) {
      this.timer = new Date().getTime()
      if (val === '0') {
        this.Processedimg = require('@/assets/images/blueselect.png')
        this.Untreatedimg = require('@/assets/images/processed.png')
        this.noProcessedimg = require('@/assets/images/select.png')
      } else if (val === '1') {
        this.Processedimg = require('@/assets/images/select.png')
        this.Untreatedimg = require('@/assets/images/processed.png')
        this.noProcessedimg = require('@/assets/images/blueselect.png')
      } else {
        this.Processedimg = require('@/assets/images/blueselect.png')
        this.Untreatedimg = require('@/assets/images/blue.png')
        this.noProcessedimg = require('@/assets/images/blueselect.png')
      }
    }
  },
  created() {
  },
  mounted() {
    this.dragController()
    this.getTeHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTeHeight)
  },
  methods: {
    getTeHeight() {
      this.treeHeight = window.innerHeight - 270
    },
    // 拖拽
    dragController() {
      this.$refs.icon.dragControllerDiv()
    },
    // 树显隐方法
    toggerTree() {
      this.treeShow = !this.treeShow
      this.isActive = !this.isActive
      this.Show = !this.Show
    },
    // 树方法
    handleTreeQuery(data) {
      this.$refs.chil.handleTree(data)
    },
    // 查询
    Query() {
      this.$refs.chil.query()
    },
    // 财政确认
    handle() {
      this.handleLoading = true
      this.$refs.chil.handleConfirm()
    },
    handleCallBack() {
      this.handleLoading = false
    },
    // 财政退回
    SendBack() {
      this.SendBackLoading = true
      this.$refs.chil.fiscalSendBack()
    },
    SendBackCallBack() {
      this.SendBackLoading = false
    },
    // 审核通过
    Pass() {
      this.PassLoading = true
      this.$refs.chil.auditPass()
    },
    PassCallBack() {
      this.PassLoading = false
    },
    // 取消确定
    cancel() {
      this.cancelLoading = true
      this.$refs.chil.cancelConfirm()
    },
    cancelCallBack() {
      this.cancelLoading = false
    },
    // 撤销审核
    Audit() {
      this.AuditLoading = true
      this.$refs.chil.undoAudit()
    },
    // 生成银行数据
    generateBankData() {
      this.generateBankDataLoading = true
      this.$refs.chil.generateBankData()
    },
    generateBankDataCallBack() {
      this.generateBankDataLoading = false
    },
    // 导出银行数据
    exportSalaryData() {
      this.exportLoading = true
      this.$refs.chil.exportSalaryData()
    },
    exportCallback() {
      this.exportLoading = false
    },
    // 重新生成银行数据
    regenerateBankData() {
      this.regenerateBankDataLoading = true
      this.$refs.chil.regenerateBankData()
    },
    regenerateBankDataCallBack() {
      this.regenerateBankDataLoading = false
    },
    AuditCallBack() {
      this.AuditLoading = false
    }

  }
}
</script>

<style scoped lang="scss">
.app-title {
  margin-bottom: 15px;
  height: 20px;
  border-bottom: 1px solid #DCDFE6;
}

</style>
